<template>
	<view>
		<!-- 头部导航栏 -->
		<uni-nav-bar left-icon="back" statusBar :border="false" @clickLeft="goBack">
			<view class="flex justify-center align-center w-100 font" @click="changeIsOpen">
				<text style="margin-right:5rpx ;">{{isOpenText}}</text> <text class="iconfont icon-shezhi"></text>
			</view>
		</uni-nav-bar>
		<!-- 表单组件 -->
		<textarea v-model="content" placeholder="说一句话吧~" class="uni-textarea px-2" style="box-sizing: border-box;" />
		<!-- 选中的分类-->
		<view class="font-md px-2 py-1 flex">
			<view class="border px-3 py main-color main-border-color flex align-center justify-center  text-muted font"
				style="border-radius: 50rpx;">
				<text class="iconfont icon-huati mr-1"></text>
				{{post_class_title ? "所属分类："+ post_class_title : "请选择分类"}}
			</view>
		</view>
		<!-- 选中的话题 -->
		<view class="font-md px-2 py-1 flex" @click="chooseTopic">
			<view class="border px-3 py main-color main-border-color flex align-center justify-center  text-muted font"
				style="border-radius: 50rpx;">
				<text class="iconfont icon-huati mr-1"></text>
				{{topic.title ? "所属话题："+topic.title : "请选择话题"}}
			</view>
		</view>
		<!-- 上传图片 -->
		<imageUpload ref="imageUpload" @change='changeImage' :list="imageList" :show="show" :content="content">
		</imageUpload>		
		<!-- 底部导航 -->
		<view class="flex align-center fixed-bottom bg-white px-2" style="height: 86rpx;">
			<picker mode="selector" :range="range" @change="choosePostClass">
				<view class="iconfont icon-caidan  footer-btn"></view>
			</picker>
			<view class="iconfont icon-huati footer-btn" @click="chooseTopic"></view>
			<view class="iconfont icon-tupian footer-btn" @click="iconClickEvent('imageUpload')"></view>
			<view class="bg-main text-white ml-auto flex justify-center align-center rounded ml animated faster"
				style="width: 140rpx; height: 60rpx;" hover-class="rubberBand" @click="submit">
				发送
			</view>
		</view>
	</view>
</template>

<script>
	const isOpenArr = ['仅自己可见', '所有人可见']
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import imageUpload from '@/components/common/image-upload.vue'
	export default {
		components: {
			uniNavBar,
			imageUpload
		},
		data() {
			return {
				content: '',
				imageList: [],
				// 是否已经弹出提示框
				showBack: false,
				isOpen: 1,
				topic: {
					id: 0,
					title: ""
				},
				//分类列表
				post_class_list: [],
				//选中分类的index值
				post_class_index: -1
			}
		},
		//监听页面返回
		onBackPress() {
			if ((this.content !== '' || this.imageList.length > 0) && !this.showBack) {
				uni.showModal({
					title: '是否保存草稿',
					cancelText: '不保存',
					confirmText: '保存',
					success: res => {
						if (res.confirm) {
							this.store()
						} else {
							uni.removeStorage({
								key: 'add-input'
							})
						}
						uni.navigateBack({
							delta: 1
						});
					},
				});
				this.showBack = true
				return true
			}
		},
		onLoad(e) {
			uni.getStorage({
				key: 'add-input',
				success: (res) => {
					if (res.data) {
						let result = JSON.parse(res.data)
						this.content = result.content
						this.imageList = result.imageList
					}
				}
			})
			uni.$on('chooseTopic', (e) => {
				this.topic.id = e.id
				this.topic.title = e.title
			})
			this.getPostClass()
		},
		beforeDestroy() {
			uni.$off('chooseTopic', (e) => {})
		},
		computed: {
			//是否显示选择图片
			show() {
				return this.imageList.length > 0
			},
			//计算权限文本
			isOpenText() {
				return isOpenArr[this.isOpen]
			},
			//picker数组数据
			range() {
				return this.post_class_list.map(item => {
					return item.classname
				})
			},
			//所选分类标题
			post_class_title() {
				if (this.post_class_index !== -1) {
					return this.post_class_list[this.post_class_index].classname
				}
			},
			//所选分类id
			post_class_id() {
				if (this.post_class_index !== -1) {
					return this.post_class_list[this.post_class_index].id
				}
			},
			//上传图片的id
			imglistIds() {
				return this.imageList.map(item => {
					return {
						id:item.id
					}
				})
			}

		},
		methods: {
			//获取分类
			getPostClass() {
				this.$H.get('/postclass').then(res => {
					this.post_class_list = res.list
				})
			},
			//返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			changeImage(e) {
				this.imageList = e
			},
			//保存草稿
			store() {
				let obj = {
					content: this.content,
					imageList: this.imageList
				}
				uni.setStorage({
					key: 'add-input',
					data: JSON.stringify(obj)
				})
			},
			//底部按钮事件
			iconClickEvent(e) {
				switch (e) {
					case 'imageUpload':
						this.$refs.imageUpload.chooseImage()
						break;
					default:
						break;
				}
			},
			//文章权限
			changeIsOpen() {
				uni.showActionSheet({
					itemList: isOpenArr,
					success: (res) => {
						this.isOpen = res.tapIndex
					},
				});
			},
			//选择话题
			chooseTopic() {
				uni.navigateTo({
					url: '../topic-nav/topic-nav?choose=true'
				})
			},
			//选择分类
			choosePostClass(e) {
				this.post_class_index = e.detail.value
			},
			//提交表单
			submit() {
				if(this.topic.id === 0){
					return uni.showToast({
						title: '请选择话题',
						icon:'none'
					});
				}
				if(this.post_class_id === 0){
					return uni.showToast({
						title: '请选择分类',
						icon:'none'
					});
				}
				if(this.content === ''){
					return uni.showToast({
						title: '请输入内容',
						icon:'none'
					});
				}
				uni.showLoading({
					title: '发布中..',
					mask: false
				});
				this.$H.post('/post/create', {
					imglist:JSON.stringify(this.imglistIds),
					text: this.content,
					isopen: this.isOpen,
					topic_id: this.topic.id,
					post_class_id: this.post_class_id
				}, {
					token: true,
					nactive:true
				}).then(res => {
					// console.log(res)
					uni.$emit('updateList')
					uni.hideLoading()
					this.showBack = true
					uni.showToast({
						title: '发布成功',
					});
					uni.navigateBack({
						delta: 1
					});
				}).catch( err => {
					console.log(res)
				})
			}
		}
	}
</script>

<style>
	.footer-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 50rpx;
		height: 86rpx;
		width: 86rpx;
	}
</style>
